<template>
  <div class="card" :style="{ width: width || '50%' }" @click.stop="toDetail">
    <div
      class="img-box"
      :style="{ backgroundImage: `url(${item.cover})` }"
    ></div>
    <div class="right">
      <div class="my-text title">{{ item.title }}</div>
      <div class="my-text author">{{ item.author }}</div>
      <div class="clickCount">
        <van-icon name="eye-o" /><span>{{ clickCount }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "width"],
  computed: {
    clickCount() {
      let count = this.item.clickCount;
      count = count > 10000 ? (count / 10000).toFixed(1) + "万" : count;
      return count;
    },
  },
  methods: {
    toDetail() {
      this.$router.push({
        name: "detail",
        params: {
          bookid: this.item.id,
          title: this.item.title,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  .img-box {
    width: 0.58rem;
    min-width: 0.58rem;
    aspect-ratio: 58/83;
  }
  .right {
    flex-grow: 1;
    margin-left: 0.1rem;
    .title {
      font-size: 0.14rem;
      font-weight: bold;
      margin: 0 0 0.05rem 0;
    }
    .author {
      font-size: 0.12rem;
      color: var(--text-gray);
    }
    .clickCount {
      font-size: 0.12rem;
      margin-top: 0.1rem;
      > span {
        margin-left: 0.02rem;
      }
    }
  }
}
</style>